<template>
  <view class="main">
    <view class="ip-item">
      <input placeholder-class="ip" placeholder="群名称" v-model="formData.name" disabled />
    </view>
    <view class="ip-item">
      <input placeholder-class="ip" placeholder="请填写群主微信" v-model="formData.wx" />
    </view>
    <view class="ip-item">
      <input type="text" placeholder="请选择所属行业" v-model="formData.industry" disabled placeholder-class="ip" />
      <image src="/static/icon/down.svg" mode="widthFix" />
      <view class="block" @click="$goUrl('/pages/circle/pages/industry')"></view>
    </view>
    <view class="ip-item">
      <input placeholder-class="ip" placeholder="请选择入群填写项" disabled v-model="groupText" />
      <image src="/static/icon/down.svg" mode="widthFix" />
      <view class="block" @click="groupShow = true"></view>
    </view>
    <view class="ip-item">
      <input placeholder-class="ip" placeholder="请选择手机号加密方式" disabled v-model="encrytionName" />
      <image src="/static/icon/down.svg" mode="widthFix" />
      <view class="block" @click="encryptionShow = true"></view>
    </view>
    <view class="ip-item">
      <input placeholder-class="ip" placeholder="请选择社区发言权限" disabled v-model="speakName" />
      <image src="/static/icon/down.svg" mode="widthFix" />
      <view class="block" @click="speakShow = true"></view>
    </view>
    <view class="ip-item">
      <input placeholder-class="ip" placeholder="请选择排序方式" disabled v-model="sortName" />
      <image src="/static/icon/down.svg" mode="widthFix" />
      <view class="block" @click="sortShow = true"></view>
    </view>
    <view class="ip-item" v-if="memberNum > 30">
      <input placeholder-class="ip" placeholder="公开到广场（满30人开启）" disabled v-model="isOpenText" />
      <image src="/static/icon/down.svg" mode="widthFix" />
      <view class="block" @click="openSquare"></view>
    </view>
    <view class="ip-item">
      <input placeholder-class="ip" placeholder="添加圈子标签" v-model="formData.tags" />
    </view>
    <view class="ip-item" @click="uploadIcon">
      <view style="font-size: 32rpx; color: #bbbbbb; width: 100%; height: 100%">请添加群图标</view>
      <view class="avatar">
        <image :src="formData.icon" mode="aspectFill" />
      </view>
      <view class="block"></view>
    </view>
    <view class="ip-item" @click="uploadBack">
      <view style="font-size: 32rpx; color: #bbbbbb; width: 100%; height: 100%">请添加群大图</view>
      <view class="avatar">
        <image :src="formData.backImage" mode="aspectFill" />
      </view>
      <view class="block"></view>
    </view>
    <view class="ip-item">
      <textarea maxlength="300" type="text" placeholder="圈子公告" placeholder-class="ip" class="text-area"
        v-model="formData.notice" />
    </view>
    <view class="ip-item">
      <textarea style="padding-top: 20rpx" placeholder-class="ip" placeholder="圈子价值" v-model="formData.effect" />
    </view>
    <view style="
        margin: 30rpx 0;
        font-size: 28rpx;
        color: #ccc;
        margin-top: 40rpx;
        padding-left: 10rpx;
      ">圈子介绍</view>
    <editText @edit="(data) => (formData.brief = data)" :valueData="formData.brief" />
  </view>
  <view class="btns">
    <Button @clickButton="carete" :loading="loading" loading-text="修改中" text="确认修改" />
  </view>

  <!-- 入群项目 -->
  <van-popup v-model:show="groupShow" position="bottom" round>
    <view class="pop-main">
      <view class="pop-title dispaly-just-between">
        <view class="cancel" @click="groupShow = false">取消</view>
        <view class="confirm" @click="groupComfirm">确定</view>
      </view>
      <view class="list">
        <scroll-view scroll-y="true" class="scroll-Y">
          <view :class="{ active: item.isSelect }" class="item" @click="item.isSelect = !item.isSelect"
            v-for="(item, index) in groupWiterList" :key="index">{{ item.dictLabel }}</view>
        </scroll-view>
      </view>
    </view>
  </van-popup>
  <!--加密方式  -->
  <van-popup v-model:show="encryptionShow" position="bottom" round>
    <view class="pop-main">
      <view class="pop-title dispaly-just-between">
        <view class="cancel" @click="encryptionShow = false">取消</view>
        <view class="confirm" @click="encryptionShow = false">确定</view>
      </view>
      <view class="list">
        <scroll-view scroll-y="true" class="scroll-Y">
          <view :class="{ active: encryptionCurrent == index }" class="item" @click="clickEncrytion(item, index)"
            v-for="(item, index) in telEncryptionTypeList" :key="index">{{ item.dictLabel }}</view>
        </scroll-view>
      </view>
    </view>
  </van-popup>
  <!--  社区发言权限  -->
  <van-popup v-model:show="speakShow" position="bottom" round>
    <view class="pop-main">
      <view class="pop-title dispaly-just-between">
        <view class="cancel" @click="speakShow = false">取消</view>
        <view class="confirm" @click="speakShow = false">确定</view>
      </view>
      <view class="list">
        <scroll-view scroll-y="true" class="scroll-Y">
          <view :class="{ active: speakCurrent == index }" class="item" @click="clickSpeak(item, index)"
            v-for="(item, index) in takePermissions" :key="index">{{ item.dictLabel }}</view>
        </scroll-view>
      </view>
    </view>
  </van-popup>
  <!--  排序方式  -->
  <van-popup v-model:show="sortShow" position="bottom" round>
    <view class="pop-main">
      <view class="pop-title dispaly-just-between">
        <view class="cancel" @click="sortShow = false">取消</view>
        <view class="confirm" @click="sortShow = false">确定</view>
      </view>
      <view class="list">
        <scroll-view scroll-y="true" class="scroll-Y">
          <view :class="{ active: sortCurrent == index }" class="item" @click="clickSort(item, index)"
            v-for="(item, index) in sortType" :key="index">{{ item.dictLabel }}</view>
        </scroll-view>
      </view>
    </view>
  </van-popup>
  <!--  公开到广场  -->
  <van-popup v-model:show="squareShow" position="bottom" round>
    <view class="pop-main">
      <view class="pop-title dispaly-just-between">
        <view class="cancel" @click="squareShow = false">取消</view>
        <view class="confirm" @click="squareShow = false">确定</view>
      </view>
      <view class="list">
        <scroll-view scroll-y="true" class="scroll-Y">
          <view :class="{ active: squareCurrent == index }" class="item" @click="clickSquare(item, index)"
            v-for="(item, index) in square" :key="index">{{ item.dictLabel }}</view>
        </scroll-view>
      </view>
    </view>
  </van-popup>
</template>

<script setup>
import { ref, watch, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { BASE_URL } from "@/config/base.js";
import {
  getUserArea,
  getWriteCircle,
  getWriteFillList,
  circleInfo,
} from "@/api/apiList";
import { uploadImage, deleteObjectEmptyKey } from "@/utils/util";
import editText from "@/components/editText/editText.vue";

const formData = reactive({
  name: "", // 群名称
  wx: "", // 微信
  fills: "", // 入群填写项
  encry: "", // 手机加密方式
  speak: "", // 发言权限
  icon: "", // 图标
  backImage: "", // 大图
  notice: "", // 公告
  sortBy: "", // 排序方式
  tags: "", // 标签
  isOpen: "", // 公开到广场
  id: "",
  industryId: "", // 行业ID
  industry: "", // 行业名称
  brief: "",
  memo: "", // 圈子介绍
  way: 1,
  effect: "", //圈子价值
});

const squareShow = ref(false);
const squareCurrent = ref(null);
const square = ref([
  { dictLabel: "是", value: 1 },
  { dictLabel: "否", value: 0 },
]);
const isOpenText = ref("");
const clickSquare = (item, index) => {
  formData.isOpen = item.value;
  isOpenText.value = item.dictLabel;
  squareCurrent.value = index;
};

const openSquare = () => {
  squareShow.value = true;
};

// 获取配置
const groupShow = ref(false);
const groupWiterList = ref([]); // 入群填写项 fills_type
const telEncryptionTypeList = ref([]); // 手机号加密方式 encry_type
const encryptionCurrent = ref(null);
const encryptionShow = ref(false);
const takePermissions = ref([]); // 发言权限 speak_type
const speakShow = ref(false);
const speakCurrent = ref(null);
const sortType = ref([]); // 排序方式 sort_type
const sortShow = ref(false);
const sortCurrent = ref(null);
const getConfig = async (type) => {
  const res = await getWriteFillList(type);
  if (res.code == 200) {
    switch (type) {
      case "/fills_type":
        groupWiterList.value = res.data;
        groupWiterList.value.forEach((item) => (item.isSelect = false));
        break;
      case "/encry_type":
        telEncryptionTypeList.value = res.data;
        break;
      case "/speak_type":
        takePermissions.value = res.data;
        break;
      case "/sort_type":
        sortType.value = res.data;
        break;
    }
  }
};

// 点击入群项目
const groupText = ref("");
const lock = ref(0);
const groupComfirm = () => {
  formData.fills = groupWiterList.value.filter((item) => item.isSelect);
  let dictLabel = [];
  let dictValue = [];
  formData.fills.forEach(
    (item) => (groupText.value = dictLabel.push(item.dictLabel))
  );
  formData.fills.forEach((item) => dictValue.push(item.dictValue));
  formData.fills = dictValue;
  groupShow.value = false;
  groupText.value = dictLabel.join("-");
  lock.value++;
};
// 点击加密方式
const encrytionName = ref("");
const clickEncrytion = (item, index) => {
  formData.encry = item.dictValue;
  encrytionName.value = item.dictLabel;
  encryptionCurrent.value = index;
};
// 点击发言权限
const speakName = ref("");
const clickSpeak = (item, index) => {
  formData.speak = item.dictValue;
  speakName.value = item.dictLabel;
  speakCurrent.value = index;
};
// 点击排序方式
const sortName = ref("");
const clickSort = (item, index) => {
  formData.sortBy = item.dictValue;
  sortName.value = item.dictLabel;
  sortCurrent.value = index;
};

// 群图标
const uploadIcon = async () => {
  const res = await uploadImage(1);
  formData.icon = res[0];
};

// 背景
const uploadBack = async () => {
  const res = await uploadImage(1);
  formData.backImage = res[0];
};

const loading = ref(false);
const carete = async () => {
  console.log(groupText.value, formData.fills);
  let newFormData;
  if (lock.value <= 0) {
    formData.fills = [];
  }
  newFormData = deleteObjectEmptyKey(formData);
  console.log(newFormData, lock.value);
  const res = await getWriteCircle(newFormData);
  loading.value = true;
  if (res.code == 200) {
    uni.showToast({
      title: "修改成功",
      icon: "none",
    });
    loading.value = false;
    setTimeout(() => {
      uni.navigateBack();
    }, 1000);
  }

  console.log(formData, "form");
};

const init = async () => {
  await getConfig("/fills_type");
  await getConfig("/encry_type");
  await getConfig("/speak_type");
  await getConfig("/sort_type");
};

const memberNum = ref(0);
onLoad((option) => {
  getPreviousPageType();
  const data = JSON.parse(option.data);
  formData.name = data.name;
  formData.id = data.id;
  getCircleInfo(formData.id);
  memberNum.value = data.memberNum;
  init();
});

const getCircleInfoData = ref({});
const getCircleInfo = async (ids) => {
  const response = await circleInfo({ id: ids });
  if (response && response?.code == 200) {
    getCircleInfoData.value = response?.data;
    const {
      name,
      wx,
      fills,
      encry,
      speak,
      icon,
      backImage,
      notice,
      sortBy,
      tags,
      isOpen,
      id,
      industryId,
      industry,
      fillsName,
      brief,
      memo,
      effect,
    } = getCircleInfoData.value;
    formData.name = name;
    formData.wx = wx;
    formData.fills = fills;
    formData.encry = encry;
    formData.speak = speak;
    formData.icon = icon;
    formData.backImage = backImage;
    formData.notice = notice;
    formData.sortBy = sortBy;
    formData.tags = tags;
    formData.isOpen = isOpen;
    formData.id = id;
    formData.industryId = industryId;
    formData.industry = industry;
    formData.effect = effect;
    // groupText.value = fillsName.join("-");
    formData.brief = brief;
    formData.memo = memo;
    groupText.value = fillsName.join("-");
    groupWiterList.value.forEach((item) => {
      fills.forEach((val) => {
        if (item.dictValue == val) {
          item.isSelect = true;
        }
      });
    });
    dictValue
    encrytionName.value = encry == "yes" ? "加密" : "不加密";
    switch (speak) {
      case "all":
        speakName.value = "全员可发言";
        break;
      case "group":
        speakName.value = "仅群主发言";
        break;
      case "groupAdmin":
        speakName.value = "仅管理员和群主发言";
        break;
    }
    switch (sortBy) {
      case "create_time":
        sortName.value = "加入时间排序";
        break;
      case "dedication":
        sortName.value = "奉献值排序";
        break;
      case "ping":
        sortName.value = "拼音排序";
        break;
    }
  }
};

const getPreviousPageType = () => {
  uni.$on("getType", (data) => {
    if (data) {
      formData.industryId = data.data.id;
      formData.industry = data.data.name;
    }
  });
};
</script>

<style lang="scss" scoped>
.main {
  padding: 30rpx 30rpx 200rpx 30rpx;
}

.must {
  color: #aaaaaa;
}

.active {
  color: #0753fd !important;
}

.btns {
  padding: 30rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}

.pop-main {
  .pop-title {
    border-bottom: 1rpx solid #eee;
    padding: 34rpx 40rpx;

    .cancel,
    .confirm {
      font-family: PingFang SC Bold;
      font-size: 32rpx;
    }

    .cancel {
      color: #aaaaaa;
    }

    .confirm {
      color: #0753fd;
    }
  }

  .list {
    padding: 0 40rpx;

    .scroll-Y {
      height: 1000rpx;
      max-height: 1000rpx;

      .item {
        font-family: PingFang SC Bold;
        font-size: 28rpx;
        font-weight: normal;
        padding: 25rpx 0;
      }
    }
  }
}

.pop-main {
  .pop-title {
    border-bottom: 1rpx solid #eee;
    padding: 34rpx 40rpx;

    .cancel,
    .confirm {
      font-family: PingFang SC Bold;
      font-size: 32rpx;
    }

    .cancel {
      color: #aaaaaa;
    }

    .confirm {
      color: #0753fd;
    }
  }

  .list {
    padding: 0 40rpx;

    .scroll-Y {
      height: 1000rpx;
      max-height: 1000rpx;

      .item {
        font-family: PingFang SC Bold;
        font-size: 28rpx;
        font-weight: normal;
        padding: 25rpx 0;
      }
    }
  }
}
</style>
